<template>
  <div>
    <navigator activeId="2"></navigator>
    <el-row class="x-container">
      <div class="card-wrap">
        <el-card shadow="never" :body-style="{ padding: '15px' }">
          <div slot="header">
            <h2>班级列表</h2>
          </div>
          <el-row :gutter="16">
            <el-col :span="6" v-for="(cls, index) in clsList" :key="index">
              <a href="">
                <el-card :body-style="{ padding: '0px' }" shadow="hover">
                  <el-image
                    fit="fill"
                    :src="cls.image"
                    style="width: 100%; max-height: 180px"
                  ></el-image>
                  <div class="cls-info">
                    <p><span>班级名称：</span>{{ cls.name }}</p>
                    <p><span>所属专业：</span>{{ cls.major }}</p>
                    <p><span>班级教师：</span>{{ cls.teacher }}</p>
                    <p><span>班级人数：</span>{{ cls.people }}</p>
                    <p><span>创建时间：</span>{{ cls.createTime }}</p>
                  </div>
                </el-card>
              </a>
            </el-col>
          </el-row>
        </el-card>
        <el-card
          shadow="never"
          :body-style="{ padding: '15px' }"
          style="margin-top: 15px"
        >
          <div slot="header">
            <h2>作业博文</h2>
          </div>
          <div class="post-list">
            <div
              class="post-item homework"
              v-for="(homework, index) in homeworkList"
              :key="index"
            >
              <el-avatar
                :src="homework.avatar"
                shape="square"
                class="left"
              ></el-avatar>
              <div class="right">
                <a href="">
                  <h3 class="title">{{ homework.title }}</h3>
                  <p class="abstract">{{ homework.abstract }}</p>
                </a>
                <div class="details">
                  <p class="right">
                    <span><i class="el-icon-s-home"></i>{{ homework.class }}</span>
                    <span><i class="el-icon-s-custom"></i>{{ homework.author }}</span>
                    <span><i class="el-icon-chat-dot-square"></i>{{ homework.comments }}</span>
                    <span><i class="el-icon-view"></i>{{ homework.views }}</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
          <el-pagination
            class="page-box"
            background
            layout="prev, pager, next"
            :hide-on-single-page="true"
            :total="total"
            @current-change="handleCurrentChange"
          ></el-pagination>
        </el-card>
      </div>
    </el-row>
  </div>
</template>

<script>
import Navigator from "@/components/Navigator";

export default {
  components: {
    Navigator,
  },
  data() {
    return {
      clsList: [
        {
          image:
            "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "计算机A1711",
          major: "计算机科学与技术",
          teacher: "张三",
          people: 50,
          createTime: "2020年5月20日",
        },
        {
          image:
            "https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png",
          name: "计算机A1711",
          major: "计算机科学与技术",
          teacher: "张三",
          people: 50,
          createTime: "2020年5月20日",
        },
      ],
      homeworkList: [
        {
          author: "张三",
          avatar: "http://img.xsirl.cn/default.jpg",
          class: "计算机A1711",
          title: "结合火车售票系统理解需求分析和概念原型",
          abstract:
            "软工实践个人总结 对于这次课程你对你自己的表现满意吗？为什么？ 不是很满意。 前期未开发之前抱着很大的期待，希望自己通过这门课开发一款能够让自己满意的应用，同时认为自己可以提前规划好所有的任务，并且在相关知识学到完备之后再去开发。但是实际是，由于总有理由让自己把",
          createTime: Date.now(),
          comments: 0,
          views: 0,
        },
      ],
      total: 15,
    };
  },
  methods: {
    handleCurrentChange(current) {},
  },
  created() {
    const obj = this.homeworkList[0];
    for (let i = 0; i < 10; ++i) {
      this.homeworkList.push(obj);
    }
  },
};
</script>

<style scoped>
.cls-info {
  padding: 10px;
  text-align: left;
}
.cls-info p {
  padding: 5px 0;
}
.cls-info span {
  color: #999;
}

.homework {
  display: flex;
  align-items: flex-start;
}
.homework>.left {
  background-color: #eee;
  flex-shrink: 0;
}
.homework>.right {
  margin-left: 15px;
}
</style>